<template>
	<my-main title="工作台"  isBack :tbas="formData.tbas" @search="search" @infoFun="infoFun" @scroll="scroll" @scrollEnd="scrollEnd">
		<my-cell title="客户信息" isBox>
			<my-box :bgColors="['linear-gradient(-45deg, #b8d6ff 0, #8bb8f7 100%)']">
				<template #left>
					<view class="countTitle">客户总数</view>
					<view class="countNumber f-50">{{ formData.Customer.CustomerCnt || 0 }}</view>
					<image src="@/static/customerLeft.png" class="customerImg"></image>
				</template>
				<template #rightTop>
					<view class="countTitle">新增客户数</view>
					<view class="countNumber">{{ formData.Customer.TodayAdd || 0 }}</view>
				</template>
				<template #rightBottom>
					<view class="countTitle">挂账客户数</view>
					<view class="countNumber">{{ formData.Customer.GzCustomerCnt || 0 }}</view>
				</template>
			</my-box>
		</my-cell>
		<my-cell title="订单汇总" isBox>
			<OrderBox :data="formData.OrderSum" />
		</my-cell>
<!-- 		<my-cell title="订单走势" isBox>
			<my-echart :data="chartOrder"></my-echart>
		</my-cell> -->
		<my-cell title="收款统计" isBox>
			<PayBox :data="formData.paymentStatistics" />
		</my-cell>
		<my-cell title="储值卡" isBox background="linear-gradient(-0deg, #3572f9 0, #8095ff 100%)" color="#fff">
			<CardBox
				:data="{
					...formData.paymentStatistics,
					CardCustomerCnt: formData.Customer.CardCustomerCnt
				}"
			/>
		</my-cell>
		<my-cell title="客户消费排行" isBox>
			<RankBox
				:data="formData.Customer.items"
				:thead="[
					{
						label: '客户名称',
						prop: 'CustomerName',
						width: null
					},
					{
						label: '消费金额',
						prop: 'ConsumeAmt',
						width: 200,
						align: 'right',
						color: '#999aaa'
					}
				]"
			/>
		</my-cell>
	</my-main>
</template>

<script lang="uts" setup>
import PayBoxItem from './PayBoxItem'
import RankBox from './RankBox'
import OrderBox from './OrderBox'
import CardBox from './CardBox'
import PayBox from './PayBox'
//公共状态
import { useVue  } from '@/utils/useVue.uts'
const { reactive, ref,app,Token,onMounted,watch,http,goToPage } = useVue()
//
// 滚动中
const scroll = () => {
	// console.log('滚动中');
	chartOrder.state=false
}
// 滚动结束
const scrollEnd = () => {
	// console.log('滚动结束');
	chartOrder.state=true
}
const chartOrder=reactive({
	state:true,
	height: 500,
	chartData:{
		categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
		series: [
			{
				name: "目标值",
				data: [35, 36, 31, 33, 13, 34]
			},
			{
				name: "完成量",
				data: [18, 27, 21, 24, 6, 28]
			}
		],
	},
	opts:{
		color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
		padding: [15, 15, 0, 5],
		enableScroll: false,
		legend: {},
		xAxis: {
			disableGrid: true
		},
		yAxis: {
			data: [
				{
					min: 0
				}
			]
		},
		extra: {
			column: {
				type: "group",
				width: 30,
				activeBgColor: "#000000",
				activeBgOpacity: 0.08
			}
		}
	}
})
const scanResult=ref('')
// 表单数据
const formData:any = reactive({
	tbas:{
		value:0,
		options:[
			{
				label:'本月',
			},
			{
				label:'本周',
			},
			{
				label:'今天',
			},
		]
	},
	//客户汇总
	Customer:{
		items:[], //消费排行榜
		CustomerCnt:0, //客户总数量
		TodayAdd:0, //今日新增客户
		GzCustomerCnt:0, ///挂账客户数
		CardCustomerCnt:0, //卡付客户数
	},
	//订单汇总
	OrderSum:{
		 OrderAllCnt: 0, //总订单数量
		  OrderAllAmt:0, //订单总金额
		  OrderFinishCnt: 0, //完工订单数
		  OrderFinishAmt:0, //完工订单金额
		  OrderUnFinishFCnt:0, //未完工订单数量
		  OrderUnFinishFAmt:0, //未完工订单总额
		  OrderGZCnt: 0, //挂账订单数量
		  OrderGZAmt:0, //挂账订单总金额
		  OrderUnPayCnt:0, //待付订单数量
		  OrderUnPayAmt:0, //待付订单金额
		  OrderRefundCnt:0, //待退款订单数量
		  OrderRefundAmt:0 //待退款订单金额
	},
	//收款统计
	paymentStatistics:{
		TotalSkdAmt:0, //总收款金额
		TotalSkdCnt: 0, //总收款单数
		TotalWxSkdAmt:0, //线上微信收款金额
		TotalWxSkdCnt:0, //线上微信收款单数
		TotalAliSkdAmt:0, //线上支付宝收款金额
		TotalAliSkdCnt:0, //线上支付宝收款单数
		TotalOffLSkdAmt:0, //线下收款金额
		TotalOffLSkdCnt:0, //线下收款单数量
		TotalCardDeAmt:0, //储值卡扣款金额
		TotalCardDeCnt:0, //储值卡扣款笔数
		TotalChargeAmt:0, //充值总金额
		TotalChargeCnt:0, //充值记录数
		offlineItems:[],//线下付款
	},
	//订单趋势
	OrderTrend:[],
})
//搜索
const search = (refresher?:any) => {
	if(refresher){
		refresher.refresherTriggered = false
	}
	const type={
		0:'Month',
		1:'Week',
		2:'Today',
	}
	const typeKey=type[formData.tbas.value]
	getPaymentStatistics(typeKey)
	getOrderSum(typeKey)
	getCustomer(typeKey)
	getOrderTrendr(typeKey)
}
//订单趋势
const getOrderTrendr=(type:string)=>{
	return new Promise(async (resolve, reject) => {
		http.request({
			url: 'api/Report/OrderTrend',
			data: {
				QueryType: type, //查询类型:Today/Week/Month
			},
			success: (res : any) => {
				formData.OrderTrend=res
				resolve(res)
			},
			fail: (err:any) => {
				reject(err)
			}
		})
	})
}
//订单统计
const getCustomer=(type:string)=>{
	return new Promise(async (resolve, reject) => {
		http.request({
			url: 'api/Report/CustomerTrend',
			data: {
				QueryType: type, //查询类型:Today/Week/Month
			},
			success: (res : any) => {
				formData.Customer=res
				resolve(res)
			},
			fail: (err:any) => {
				reject(err)
			}
		})
	})
}
//订单统计
const getOrderSum=(type:string)=>{
	return new Promise(async (resolve, reject) => {
		http.request({
			url: 'api/Report/OrderSum',
			data: {
				QueryType: type, //查询类型:Today/Week/Month
			},
			success: (res : any) => {
				formData.OrderSum=res
				resolve(res)
			},
			fail: (err:any) => {
				reject(err)
			}
		})
	})
}
//收款统计
const getPaymentStatistics=(type:string)=>{
	return new Promise(async (resolve, reject) => {
		http.request({
			url: 'api/Report/SkdListRt',
			data: {
				QueryType: type, //查询类型:Today/Week/Month
			},
			success: (res : any) => {
				formData.paymentStatistics=res
				resolve(res)
			},
			fail: (err:any) => {
				reject(err)
			}
		})
	})
}
const infoFun = () => {
	search()
}
onMounted(() => {
})
</script>

<style scoped lang="scss">
.customerImg {
	position: absolute;
	right: 16rpx;
	bottom: 16rpx;
	max-width: 160rpx;
	max-height: 160rpx;
}
</style>
